import React, { Component, createContext } from "react";
// context的作用相当于vue的依赖注入
// context是有响应式的

import Child2 from "./Child2";

// 调用createContext方法可以得到一个对象
const context = createContext();
//       提供者     消费者
export const { Provider, Consumer } = context;
// Provider要放在父组件上，把整个父组件套住，需要一个value属性
// Consumer要用在子组件上，可以在需要的位置上使用Consumer，里面写一个函数

class Child1 extends Component {
  state = {};
  render() {
    return (
      <>
        <div>child1组件</div>
        <Child2 />
      </>
    );
  }
}

class App extends Component {
  state = {
    num: 10,
  };
  render() {
    return (
      <Provider value={{ num: this.state.num }}>
        <h2>context上下文</h2>
        <Child1 />
      </Provider>
    );
  }
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        num: 20,
      });
    }, 3000);
  }
}

export default App;
